<template>
  <div class="comments">
    <Header>
      <span
        class="iconfont iconjiantou2"
        slot="left"
        @click="$router.back()"
      ></span>
      <span slot="title">我的跟帖</span>
    </Header>
    <div class="keeps">
      <div class="item" v-for="item in commentsList" :key="item.id">
        <div class="head">
          <img
            :src="
              item.user.head_img
                ? ('http://127.0.0.1:3000'+item.user.head_img)
                : 'http://127.0.0.1:3000/uploads/image/IMG1569382889487.png'
            "
            alt
          />
          <div>
            <p>{{ item.user.nickname }}</p>
            <span>{{ item.create_date }}</span>
          </div>
          <span @click="handleReply(item)">回复</span>
        </div>
        <!-- 用组件写 -->
        <commentcell v-if="item.parent" :parent="item.parent" @clickReply="handleReply"></commentcell>
        <div class="text">{{ item.content }}</div>
      </div>
    </div>
    <commentFooter
      :post="article"
      :obj="replyObj"
      @refresh="refreshComment"
      @reset="replyObj=null"
    ></commentFooter>
  </div>
</template>

<script>
import Header from '../components/header.vue';
import { comments,getArticleDetail } from '../apis/article.js';
import commentFooter from '../components/commentFooter.vue'
import commentcell from '../components/commentcell.vue';
export default {
  data() {
    return {
      commentsList: [],
      article: {},
    replyObj:null
    };
  },
  components: {
    Header,
    commentcell,
    commentFooter
  },
  async mounted() {

    //   获取评论
    this.init();

      // 根据id获取文章的详情，实现文章详情的动态渲染
    let res2 = await getArticleDetail(this.$route.params.id)
    console.log(res2);
    this.article = res2.data.data
  },
  methods: {
    async init() {
    // console.log(this.$route.params.id);
    let res = await comments(this.$route.params.id, {
      pageIndex: 1,
      pageSize: 10
    });
    // console.log(res);
    this.commentsList = res.data.data.length
      ? res.data.data.map(value => {
          value.user.head_img
            ? 'http://127.0.0.1:3000' + value.user.head_img
            : '../assets/logo.png';
          return value;
        })
      : [];
      },
      handleReply(item) {
        //   console.log(item);可以拿到评论对象 传给子组件
          this.replyObj = item;
      },
      refreshComment() {
          this.init();
          window.scrollTo(0,0)
      }
  }
};
</script>

<style lang="less" scoped>
.keeps {
  border-top: 5px solid #ddd;
  padding: 0 15px 50px;
  .item {
    padding: 10px 0;
    border-bottom: 1px solid #ccc;
    .head {
      display: flex;
      justify-content: space-between;
      align-items: center;
      > img {
        width: 50/360 * 100vw;
        height: 50/360 * 100vw;
        display: block;
        border-radius: 50%;
      }
      > div {
        flex: 1;
        display: flex;
        flex-direction: column;
        margin-left: 10px;
        > span {
          font-size: 12px;
          color: #999;
          line-height: 25px;
        }
      }
      > span {
        color: #999;
        font-size: 13px;
      }
    }
    .text {
      font-size: 14px;
      color: #333;
      padding: 20px 0 10px 0;
    }
  }
  .more {
    width: 100px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    border: 1px solid #ccc;
    border-radius: 15px;
    margin: 20px auto;
    font-size: 13px;
  }
}
</style>
